#{extends '/template/main.html' /}

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title" style="height:30px;line-height: 50px;">订单详情</h3>
        <div id="paytype_" style="float: left;margin-left: 60px;font-size: 15px;">
            *{#{if order.goodsType == enums.GoodsType.SPORTS_ROOMS && order.amount <= 0}}*
                 *{请到 [健身管理 -> 线下预约] 下机结账}*
            *{#{/if}}*
            *{#{else}}*
                *{<div style="margin-top: 13px;float: left;">}*
                    *{<label class="radio-inline">}*
                        *{<input type="radio" value="1" name="payway">}*
                        *{微信}*
                    *{</label>}*
                    *{<label class="radio-inline" style="margin-left: 15px">}*
                        *{<input type="radio" value="2" name="payway">}*
                        *{支付宝}*
                    *{</label>}*
                *{#{if order?.goodsType.toString() != 'RECHARGE'}}*
                    *{<label class="radio-inline" style="margin-left: 15px">}*
                        *{<input type="radio" value="3" name="payway">}*
                        *{会员卡}*
                    *{</label>}*
                *{#{/if}}*
                    *{<label class="radio-inline" style="margin-left: 15px">}*
                        *{<input type="radio" value="4" name="payway">}*
                        *{现金}*
                    *{</label>}*
                    *{<label class="radio-inline" style="margin-left: 15px">}*
                        *{<input type="radio" value="5" name="payway">}*
                        *{银行卡}*
                    *{</label>}*
                    *{<label class="radio-inline" style="margin-left: 15px">}*
                        *{<input type="radio" value="6" name="payway">}*
                        *{信用卡}*
                    *{</label>}*
                *{</div>}*

                *{<div style="margin-top: 10px;float: left;margin-left: 20px;">}*
                    *{<button class="btn btn-turquoise" id="pay_btn" style="float: right;margin: 0px 0px;">确认付款</button>}*
                *{</div>}*
            *{#{/else}}*
        </div>
        *{<div class="panel-options" style="padding: 0px 0px;">}*
            *{#{if order?.confirmStatus == null}}*
                *{<button class="btn btn-turquoise" id="bespeak_btn" style="float: right;margin: 0px 0px;">确认已支付</button>}*
            *{#{/if}}*
        *{</div>}*
    </div>

    <div id="haspay" style="position: absolute;top:100px;left:160px;z-index: 999999;opacity: 0.8;display:none;">
        <img src="/public/images/haspay.png" width="160px"/>
    </div>

    <div class="panel-body">

            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-1" style="width: 150px;padding-top: 8px;">订单编号:</label>

                <div class="col-sm-10" style="padding-left: 0px;">
                    <input type="text" class="form-control" readonly value="${order?.orderNumber}" style="background: #ffffff;border:none;color:red;">
                </div>
            </div>

            <div class="form-group-separator">&nbsp;</div>

            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-2" style="width: 150px;padding-top: 8px;">下单人:</label>

                <div class="col-sm-10" style="padding-left: 0px;">
                    <input type="text" class="form-control" readonly value="${order?.webUser?.nickName}" style="background: #ffffff;border:none;">
                </div>
            </div>

            <div class="form-group-separator">&nbsp;</div>

            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-2" style="width: 150px;padding-top: 8px;">下单时间:</label>

                <div class="col-sm-10" style="padding-left: 0px;">
                    <input type="text" class="form-control" readonly value="${order?.createdAt}" style="background: #ffffff;border:none;">
                </div>
            </div>

            <div class="form-group-separator">&nbsp;</div>


        *{<div class="form-group">}*
            *{<label class="col-sm-2 control-label" for="field-2" style="width: 150px;padding-top: 8px;">订单类型:</label>}*

            *{<div class="col-sm-10" style="padding-left: 0px;">}*
                *{<input type="text" class="form-control" readonly value="&{'GoodsType.' + order?.goodsType}" style="background: #ffffff;border:none;">}*
            *{</div>}*
        *{</div>}*

        *{<div class="form-group-separator">&nbsp;</div>}*

            *{<div class="form-group">}*
                *{<label class="col-sm-2 control-label" for="field-2" style="width: 150px;padding-top: 8px;">订单来源:</label>}*

                *{<div class="col-sm-10" style="padding-left: 0px;">}*
                    *{<input type="text" class="form-control" readonly value="&{'OrderType.' + order?.type}" style="background: #ffffff;border:none;">}*
                *{</div>}*
            *{</div>}*

            *{<div class="form-group-separator">&nbsp;</div>}*

            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-2" style="width: 150px;padding-top: 8px;">订单金额:</label>

                <div class="col-sm-10" style="padding-left: 0px;">
                    <input type="text" class="form-control" readonly value="${order?.amount?.format('#.##')} 元" style="background: #ffffff;border:none;">
                </div>
            </div>

            <div class="form-group-separator">&nbsp;</div>

            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-2" style="width: 150px;padding-top: 8px;">订单备注:</label>

                <div class="col-sm-10" style="padding-left: 0px;">
                    <input type="text" class="form-control" readonly value="${order?.remark == null ? '暂无' : order?.remark}" style="background: #ffffff;border:none;">
                </div>
            </div>

            <div class="form-group-separator">&nbsp;</div>

            *{<div class="form-group">}*
                *{<label class="col-sm-2 control-label" for="field-2" style="width: 150px;padding-top: 8px;">支付状态:</label>}*

                *{<div class="col-sm-10" style="padding-left: 0px;">}*
                    *{<input type="text" class="form-control" readonly value="&{'OrderStatus.' + order?.status}" style="background: #ffffff;border:none;">}*
                *{</div>}*
            *{</div>}*
            *{<div class="form-group-separator">&nbsp;</div>}*

            *{<div class="form-group">}*
                *{<label class="col-sm-2 control-label" for="field-2" style="width: 150px;padding-top: 8px;">确认支付状态:</label>}*

                *{<div class="col-sm-10" style="padding-left: 0px;">}*
                    *{<input type="text" class="form-control" readonly value="${order?.confirmStatus == null ? '未确认':'已确认'}" style="background: #ffffff;border:none;">}*
                *{</div>}*
            *{</div>}*
            *{<div class="form-group">}*
                *{<label class="col-sm-2 control-label" for="field-2" style="width: 150px;padding-top: 8px;">收货人姓名:</label>}*
                *{<div class="col-sm-10" style="padding-left: 0px;">}*
                    *{<input type="text" class="form-control" readonly value="${order?.address?.userName}" style="background: #ffffff;border:none;">}*
                *{</div>}*
            *{</div>}*
            *{<div class="form-group">}*
                *{<label class="col-sm-2 control-label" for="field-2" style="width: 150px;padding-top: 8px;">收货人电话:</label>}*
                *{<div class="col-sm-10" style="padding-left: 0px;">}*
                    *{<input type="text" class="form-control" readonly value="${order?.address.phone}" style="background: #ffffff;border:none;">}*
                *{</div>}*
            *{</div>}*
            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-2" style="width: 150px;padding-top: 8px;">地址:</label>
                <div class="col-sm-10" style="padding-left: 0px;">
                    <input type="text" class="form-control" readonly value="${order?.area?.name}${order?.orderAddress}" style="background: #ffffff;border:none;">
                </div>
            </div>
            *{<div class="form-group">}*
                *{<label class="col-sm-2 control-label" for="field-2" style="width: 150px;padding-top: 8px;">商户电话:</label>}*
                *{<div class="col-sm-10" style="padding-left: 0px;">}*
                    *{<input type="text" class="form-control" readonly value="${order?.merchant.servicePhone}" style="background: #ffffff;border:none;">}*
                *{</div>}*
            *{</div>}*

        <div class="form-group-separator"style="margin-bottom: 25px">&nbsp;</div>
        <div>
            <table class="table table-bordered table-striped" id="example-2">
                <thead>
                <tr>
                    <th>商品名称</th>
                    *{#{if order?.goodsType.toString() == "COACH" || order?.goodsType.toString() == "SPORTS_ROOMS"}}*
                        *{<th>开始时间</th>}*
                        *{<th>结束时间</th>}*
                    *{#{/if}}*
                    <th>价格</th>
                </tr>
                </thead>

                <tbody class="middle-align">
                #{list orderItems,as:'orderItem'}
                <tr>
                    <td>${orderItem?.goods?.name}</td>
                    *{#{if order?.goodsType.toString() == "COACH" || order?.goodsType.toString() == "SPORTS_ROOMS"}}*
                        *{<td>${orderItem?.goods?.beginAt?.format('yyyy-MM-dd HH:mm')}</td>}*
                        *{<td>${orderItem?.goods?.endAt?.format('yyyy-MM-dd HH:mm')}</td>}*
                    *{#{/if}}*
                    <td>${orderItem?.amount}</td>
                </tr>
                #{/list}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Imported styles on this page -->
<link rel="stylesheet" href="/public/js/wysihtml5/src/bootstrap-wysihtml5.css">
<link rel="stylesheet" href="/public/js/uikit/vendor/codemirror/codemirror.css">
<link rel="stylesheet" href="/public/js/uikit/uikit.css">
<link rel="stylesheet" href="/public/js/uikit/css/addons/uikit.almost-flat.addons.min.css">
<script src="/public/js/wysihtml5/lib/js/wysihtml5-0.3.0.js"></script>
<!-- Imported scripts on this page -->
<script src="/public/js/wysihtml5/src/bootstrap-wysihtml5.js"></script>
<script src="/public/js/uikit/vendor/codemirror/codemirror.js"></script>
<script src="/public/js/uikit/vendor/marked.js"></script>
<script src="/public/js/uikit/js/uikit.min.js"></script>
<script src="/public/js/uikit/js/addons/htmleditor.min.js"></script>
<script src="/public/js/ckeditor/ckeditor.js"></script>
<script src="/public/js/ckeditor/adapters/jquery.js"></script>

<!-- Imported scripts on this page -->
<script src="/public/js/jquery-validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="/public/lib/layer/js/layer.js"></script>

<script>
    $(function(){
        $(document).on("click", "input[name='payway']", function(){
            if($(this).attr("checked")){
                $(this).removeAttr("checked");
            }else{
                $(this).attr("checked","checked");
            }
            $("input[name='payway'][value!='"+$(this).val()+"']").removeAttr("checked");
        });

        $(document).on("click", "#pay_btn", function(){
            var val = $("input[name='payway'][checked='checked']").val();

            if(val == null || val == ""){
                layer.msg("请先选择支付方式");
                return;
            }

            var url = '/BS0017/admin/order/pay/${order?.orderNumber}/${order?.goodsType}/'+val;

            if(val == 1){
                window.open(url);
            } else {
                layer.open({
                    title:"付款",
                    type: 2,
                    area: ['600px', '500px'],
                    fixed: true,
                    maxmin: false,
                    content: url
                });
            }
        });

        $(document).on("click", "#bespeak_btn", function(){
            layer.confirm("确定已经收到款项了吗?", {
                btn: ['确定']
            }, function(){
                $.getJSON("/BS0023/admin/order/confirmOrder",{id: "${order?.id}"},
                    function (data) {
                        if(data.success){
                            layer.alert(data.msg);
                            setTimeout("location.reload()", 2000);
                        }else{
                            layer.alert(data.msg);
                        }
                    }
                );
            });
        });

        #{if order?.status == enums.OrderStatus.PAID}
            $("#haspay").css("display", "block");
        #{/if}
        #{if order?.status != enums.OrderStatus.UNPAID}
            $("#paytype_").css("display", "none");
        #{/if}
    })

    function aliRedirect(){
        var url = '/admin/order/pay/${order?.orderNumber}/${order?.goodsType}/21';
        window.open(url);
        layer.closeAll();
    }

</script>